<!DOCTYPE html>
<html style="width: 100%;height: 100%">
<head>
    <meta charset="UTF-8">
    <script src="lottie.min.js"></script>
    <script src=" jquery-2.1.4.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }

        .tabs {
            width: 1210px;
            margin: 0 auto;
            border-bottom: 1px solid rgb(237, 237, 237);;
            overflow: hidden;
            padding: 0 125px;
        }

        .item {
            float: left;
            width: 160px;
            padding-bottom: 50px;
            /*background: #eeeeee;*/
            text-align: center;
        }

        .img {
            width: 50px;
            height: 50px;
            display: inline-block;
            margin: 45px auto;
        }

        .text {
            display: block;
            height: 28px;
            font-size: 20px;
            font-family: PingFangSC-Regular;
            color: rgba(197, 199, 203, 1);
            line-height: 28px;
            text-align: center;
        }
    </style>
</head>
<body style="background-color:#fff">
<div class="tabs">
    <div class="item">
        <span class="img" id="bodymovin1"></span>
        <span class="text">项目描述</span>
    </div>

    <div class="item">
        <span class="img" id="bodymovin2"></span>
        <span class="text">行业解决方案</span>
    </div>
    <div class="item">
        <span class="img" id="bodymovin3"></span>
        <span class="text">技术路线</span>
    </div>
    <div class="item">
        <span class="img" id="bodymovin4"></span>
        <span class="text">小视频</span>
    </div>
    <div class="item">
        <span class="img" id="bodymovin5"></span>
        <span class="text">分配计划</span>
    </div>
    <div class="item">
        <span class="img" id="bodymovin6"></span>
        <span class="text">发展前景</span>
    </div>
</div>

<script>
    $(document).ready(function () {
//         var anim=[];
        for (var i = 1; i < 7; i++) {
            var animData = {
                container: document.getElementById('bodymovin' + i),
                renderer: 'svg',
                loop: false,
                autoplay: false,
                path: 'icon' + i + '.json'

            };
            var anim = bodymovin.loadAnimation(animData);
            var that = $("#bodymovin" + i);
            (function (anim) {
                that.mouseover(function () {
                    anim.setDirection(0);
                    anim.play();
                });
                that.mouseleave(function () {
                    anim.goToAndStop(0, true);
                });
                that.click(function () {
                    anim.goToAndStop(15, true);
                });
            })(anim);
        }
        ;
    });
</script>
</body>
</html>
